<template>
  <div class="irregular">
        <!-- 动态表单 -->
        <dynamic-form :formDataList='formDataList' @getFormData='getFormData'></dynamic-form>

        <!-- 按钮操作 -->
        <custom-setbtn>
            <template #l_btn>
                <div class="l_btn">
                    <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click='createUnit'>创建不良品项</el-button>
                    <el-popover placement="bottom" trigger="click" popper-class='batchPoper'>
                        <div class='operateBtn'>
                            <el-button type="text" size="mini" icon="el-icon-delete" @click='batchDel'>批量删除</el-button>
                        </div>
                        <el-button type="primary" size="mini" icon="el-icon-s-operation" :disabled='disabled'
                            slot="reference" style='margin:0 10px'>批量操作
                        </el-button>
                    </el-popover>
                    <el-button type="primary" size="mini" icon="el-icon-download" plain @click='importModel'>导入</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-upload2" plain @click='getProcessRouteExport'
                        :disabled="tableList.length <= 0">导出</el-button>
                    <el-button type="text" size="mini" icon="el-icon-document"
                        @click="viewImportLog">查看导入日志</el-button>
                </div>
            </template>
            <template #r_btn>
                <div class="r_btn">
                    <!-- 列配置表格 -->
                    <pop-checkbox :disposeGroup='disposeGroup' @handleChangeDiposeGroup='handleChangeDiposeGroup'>
                    </pop-checkbox>
                </div>
            </template>
        </custom-setbtn>

        <!-- 批量删除 -->
        <el-dialog
            :visible.sync="batchDelVisible"
            width="416px"
            :show-close='false'>
            <span style="display:flex">
                <span
                    class='el-icon-warning-outline'
                    style="color:#faad14;font-size:22px;margin-right:10px"
                ></span>
                删除后数据无法恢复，确定删除吗?
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="batchDelVisible = false">取 消</el-button>
                <el-button type="primary" @click="getBaseDel">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 表格 -->
        <tableList
            :tableGroup='tableGroup' 
            :searchForm='formDataList.searchForm'
            :tableList='tableList'
            :menu='menu' 
            @tableListChecked='tableListChecked'
            @getTableData='getTableData'
            @delTableData='delTableData'
            ref='tableList'></tableList>

        <unitDialog :dialogData='dialogData' :dialogStatus='dialogStatus' @dialogClose='dialogClose'></unitDialog>

         <!-- 导入 -->
        <import-mould title='不良品项' ref='importMould' @importSuccess="importSuccess"></import-mould>
  </div>
</template>

<script>
import dynamicForm from '@/components/dynamicForm'
import tableList from '../components/tableList'
import unitDialog from '../components/dialog'
import fileDownload from "js-file-download";
import {
    badProductList,
    badProductHandle,
    baseDel,
    badProductDel,
    badProductImport
} from '@/api/baseController'
import { productColumns } from '@/api/customFieldController'
export default {
    components: {
        dynamicForm,
        tableList,
        unitDialog,
    },
    data() {
        return {
            name: 'form',
            disabled: true,
            // 表单项
            formDataList: {
                formGroup: [
                    {
                        label: 'code',
                        name: '编号',
                        prop: '',
                        placeholder: '请输入编号',
                        key: 'srk'
                    },
                    {
                        label: 'name',
                        name: '名称',
                        prop: '',
                        placeholder: '请输入名称',
                        key: 'srk'
                    },
                ],
                searchForm: {
                    code: '',
                    name: '',
                    limit:10,
                    page:1
                },
                formSet: false
            },
            disposeGroup: [],
            tableGroup: [],
            tableList: [],
            // 对话框参数
            dialogData: {
              title: '创建不良品项',
              name: '',
              code: '',
              type: '不良品项'
            },
            dialogStatus: false,
            // 当前页
            menu: '不良品项',
            batchDelData: [],
            batchDelVisible: false,
        }
    },
    mounted() {
        this.getProductColumns({type: 'badProduct'})
            .then(()=>{
                this.getTableData(this.formDataList.searchForm)
            })
    },
    methods: {
        getProductColumns: async function(data){
            const res = await productColumns(data)
            if (res.code == 200) {
                this.disposeGroup = []
                this.tableGroup = []
                res.data.map((item, i) => {
                    let width = ''
                    width = item.name == 'index' ? '80' : '180'
                    if (item.state) {
                        this.tableGroup.push({
                            label: item.name,
                            name: item.chineseName,
                            width
                        })
                    }
                    this.disposeGroup.push({
                        label: item.name,
                        name: item.chineseName,
                        state: item.state
                    })
                })
            }
        },
        //监视复选框值变化
        handleChangeDiposeGroup(disposeGroup) {
            let configureList = []
            configureList = disposeGroup.map(i => {
                return {
                    name: i.label,
                    chineseName: i.name,
                    state: i.state
                }
            })
            this.getProductColumns({
                type: 'badProduct',
                configureList
            }).then(()=>{
                this.$refs.tableList.changeLayout() //防止改变table列配置出现抖动
            })
        },
        // 列表数据
        getTableData(data) {
            this.$refs.tableList.onloadLogin(true)
            badProductList(data).then(res => {
                this.$refs.tableList.onloadLogin(false)
                if(res.code == 200) {
                    this.tableList = res.data.records
                    this.tableList.map((item, i) => {
                        item.index = (res.data.current - 1) * 10 + (i + 1)
                    })
                    this.$refs.tableList.totalNum(res.data.total)
                }
            })
        },
        // 创建编辑不良品项
        getHandle(data, m) {
            badProductHandle(data).then(res => {
                if(res.code == 200) {
                    this.utils.showMsg(m, 'success')
                    this.getTableData(this.formDataList.searchForm)
                }
            })
        },
        // 删除
        delTableData(d, page) {
            let data = {
                id: d.id
            }
            badProductDel(data).then(res => {
                if(res.code == 200) {
                    if(res.data == 'success') {
                        this.utils.showMsg('删除成功', 'success')
                    } else {
                        this.utils.showMsg(res.data, 'error')
                    }
                    this.formDataList.searchForm.page = page
                    this.getTableData(this.formDataList.searchForm)
                }
            })
        },
        // 批量删除
        batchDel() {
            this.batchDelVisible = true
        },
        getBaseDel() {
            let data = {
                type: 2,
                ids: this.batchDelData
            }
            this.batchDelVisible = false
            baseDel(data).then(res => {
                if(res.code == 200) {
                    let str = res.data.substring(res.data.indexOf('败'))
                    let n = str.substring(2, str.length - 2)
                    if(n == 0) {
                        this.utils.showMsg(res.data, 'success')
                    } else {
                        this.utils.showMsg(res.data, 'error')
                    }
                    this.getTableData(this.formDataList.searchForm)
                    this.$refs.tableList.clearSel()
                }
            })
        },
        // 打开对话框
        createUnit() {
          this.dialogStatus = true
        },
        // 对话框关闭后参数
        dialogClose(val, d) {
            this.dialogStatus = val
            if(d) {
                this.getHandle(d, '创建成功')
            }
            this.dialogStatus = val
        },
        // 表格内容勾选
        tableListChecked(arr, page) {
            this.formDataList.searchForm.page = page
            this.batchDelData = arr.join(',')
            if(arr.length > 0) {
                this.disabled = false
            } else {
                this.disabled = true
            }
        },
        //点击查询获取表单数据
        getFormData(val){
            val.page = 1
            this.formDataList.searchForm = val
            this.getTableData(val)
        },
        
        // 导入
        importModel() {
            let obj = {
                type: 'badProduct',
                importUrl: '/base/bad_product_import',
                isCover:true
            }
            this.$refs.importMould.openDialog(obj)
        },
        // 导入成功
        importSuccess() {
            this.getTableData(this.formDataList.searchForm)
        },
        // 导出
        getProcessRouteExport() {
            badProductImport({}).then(res => {
                fileDownload(res, '不良品项' + new Date().dateFormat('yyyyMMddhhmmss') + '.xlsx', 
                    'application/vnd.ms-excel;charset=UTF-8')
            })
        },
        // 查看导入日志
        viewImportLog() {
            this.$router.push({
                path: '/basicData/irregular/loadLog',
                query: {
                    name: '不良品项'
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.irregular {
    overflow: auto;
}
</style>